@use '@material/button/button' as mdc-button;
@use '@material/button/variables' as mdc-button-variables;
@use '../mdc-helpers/mdc-helpers';
@use '../../cdk/a11y/a11y';
@use '_button-base';


@include mdc-button.without-ripple($query: mdc-helpers.$mat-base-styles-query);

.mat-mdc-button, .mat-mdc-unelevated-button, .mat-mdc-raised-button, .mat-mdc-outlined-button {
  @include button-base.mat-private-button-interactive();
  @include button-base.mat-private-button-disabled();
}

// MDC expects button icons to contain this HTML content:
// ```html
//   <span class="mdc-button__icon material-icons">favorite</span>
// ```
// However, Angular Material expects a `mat-icon` instead. The following
// mixins will style the icons appropriately.
.mat-mdc-button {
  .mat-icon {
    @include mdc-button.icon();
  }
 .mdc-button__label + .mat-icon {
   @include mdc-button.icon-trailing();
 }
}

.mat-mdc-unelevated-button, .mat-mdc-raised-button, .mat-mdc-outlined-button {
  // Icons inside contained buttons have different styles due to increased button padding
  .mat-icon {
    @include mdc-button.icon();
    @include mdc-button.icon-contained();
  }

  .mdc-button__label + .mat-icon {
    @include mdc-button.icon-contained-trailing();
  }
}

// Add an outline to make buttons more visible in high contrast mode. Stroked buttons and FABs
// don't need a special look in high-contrast mode, because those already have an outline.
.mat-mdc-button:not(.mdc-button--outlined),
.mat-mdc-unelevated-button:not(.mdc-button--outlined),
.mat-mdc-raised-button:not(.mdc-button--outlined),
.mat-mdc-outlined-button:not(.mdc-button--outlined),
.mat-mdc-icon-button {
  @include a11y.high-contrast(active, off) {
    outline: solid 1px;
  }
}

@include a11y.high-contrast(active, off) {
  .mat-mdc-button-base:focus {
    outline: solid 3px;
  }
}

// Since the stroked button has has an actual border that reduces the available space for
// child elements such as the ripple container or focus overlay, an inherited border radius
// for the absolute-positioned child elements does not work properly. This is because the
// child element cannot expand to the same boundaries as the parent element with a border.
// In order to work around this issue by *not* hiding overflow, we adjust the child elements
// to fully cover the actual button element. This means that the border-radius would be correct
// then. See: https://github.com/angular/components/issues/13738
.mat-mdc-outlined-button .mat-mdc-button-ripple,
.mat-mdc-outlined-button .mdc-button__ripple {
  $offset: -(mdc-button-variables.$outlined-border-width);
  top: $offset;
  left: $offset;
  bottom: $offset;
  right: $offset;
  border: none;
}
